<template>
	<view class="page-home">
		<view class="search" v-if="is_open">
			<view class="input" @tap="toSearch">
				<cl-input prefix-icon="cl-icon-search" :placeholder="hotTitle"></cl-input>
			</view>
			<image src="/static/icon/message.png" />
		</view>
		<scroll-view class="list" scroll-y="true" @scrolltolower="handleReachBottom">
			<view class="item" v-for="(item, index) in dataList" :key="index" @tap="toDetail(item)">
				<view class="det">
					<view class="title">
						<cl-text
							:value="item.title"
							color="#000000"
							:size="32"
							:ellipsis="2"
						></cl-text>
					</view>
					<view class="count">
						<view class="count-item">发表时间{{ item.time }}</view>
					</view>
				</view>
				<view class="cover">
					<image :src="item.pic" mode="" />
				</view>
			</view>
		</scroll-view>
		
		
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			is_open:0,
			start:0,
			dataList:[],
			hotTitle: "搜你想搜的",
			active: "attention",
			tabs: [
				{ label: "新闻", name: "attention" },
				{ label: "头条", name: "recom" },
				{ label: "星座", name: "recom" },
				{ label: "女性", name: "finance" },
				{ label: "体育", name: "entertainment" },
				{ label: "娱乐", name: "funny" },
				{ label: "军事", name: "military" },
				{ label: "教育", name: "business" },
				{ label: "财经", name: "business" },
				{ label: "科技", name: "business" },
				{ label: "NBA", name: "business" },
				{ label: "股票", name: "business" },
			],
			list: [],
			visible: false,
		};
	},
	onLoad() {
		this.getList()
	},
	onShow() {
		ks.showShareMenu();
	},
	methods: {
		handleReachBottom() {
		      // 触底，加载更多数据的逻辑
		      this.loadMoreData();
		},
		loadMoreData() {
		  // 加载更多数据的逻辑
		  this.getList();
		  console.log('触底了，加载更多数据');
		},
		getList(){
			var that = this
			uni.request({
			  // url: this.$host + 'api/news',
			  url: 'https://dy.anwuyouby.cn/api/v1/67db714f77dbb',
			  method:'post',
			  data: {channel:'科技',num:30,start:this.start},
			  success: (result) => {
			    var endTime = new Date();
			    var list = result.data.data.list;
				that.is_open = result.data.data.is_open;
				that.dataList = that.dataList.concat(list);
				console.log(that.dataList.length)
				that.start = that.dataList.length;
			  },
			  fail: (err) => {
			    
			  },
			  complete: (e) => {
			    
			  }
			});
		},
		toSearch() {
			uni.navigateTo({
				url: "/pages/search/index",
			});
		},
		toDetail(detail) {
			uni.setStorage({
			  key: 'content',
			  data: detail.content
			});
			var content = {
			    time: detail.time,
			    title: detail.title,
			    cover: detail.pic,
			  };
			uni.navigateTo({
				url: "/pages/news/detail?query=" + encodeURIComponent(JSON.stringify(content))
			});
		},
		onOpen() {
			this.visible = true;
		},
		toPublish() {
			this.visible = false;
			uni.navigateTo({
				url: "/pages/publish/index",
			});
		},
	},
};
</script>

<style lang="scss">
.page-home {
	.search {
		display: flex;
		align-items: center;
		width: 100%;
		height: 123rpx;
		padding: 0 35rpx;
		background-color: #f95859;
		box-sizing: border-box;

		.input {
			flex: 1;
		}

		image {
			width: 38rpx;
			height: 35rpx;
			margin-left: 30rpx;
		}
	}
	.tabs {
		background-color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1rpx solid #eee;

		/deep/.cl-tabs {
			&__dropdown {
				color: #000;
			}
		}
	}
	.list {
		width: calc(100% - 60rpx);
		padding-top: 30rpx;
		border-bottom: 1rpx solid #eeeeee;
		margin: 0 30rpx;
		.item {
			display: flex;
			align-items: center;
			margin-bottom: 38rpx;
			.det {
				margin-right: 66rpx;
				flex: 1;
				/deep/.cl-text {
					line-height: 40rpx;
				}
				.count {
					display: flex;
					align-items: center;
					margin-top: 33rpx;
					.is-top {
						width: 75rpx;
						height: 32rpx;
						margin-right: 20rpx;
						background-color: #f95859;
						color: #f5c7cc;
						border-radius: 16rpx;
						font-size: 22rpx;
						text-align: center;
					}
					&-item {
						margin-right: 20rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}
			.cover {
				width: 205rpx;
				height: 147rpx;
				border-radius: 8rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.hot {
		width: calc(100% - 60rpx);
		margin: 33rpx 30rpx 0 30rpx;
		&-head {
			display: flex;
			.tag {
				width: 76rpx;
				height: 39rpx;
				margin-right: 15rpx;
				margin-bottom: 31rpx;
				background: #d43c3d;
				border-radius: 4rpx;
				color: #fff;
				text-align: center;
				line-height: 39rpx;
				font-size: 28rpx;
			}
		}
		&-list {
			.item {
				position: relative;
				padding-left: 35rpx;
				::after {
					content: "";
					display: inline-block;
					position: absolute;
					top: 20rpx;
					left: 0;
					width: 9rpx;
					height: 9rpx;
					background-color: #3c4166;
					border-radius: 50%;
					z-index: -1;
				}
			}
		}
	}
	.publish {
		.open {
			position: fixed;
			right: 30rpx;
			bottom: 130rpx;
			width: 120rpx;
			height: 120rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.popup {
			/deep/.cl-popup {
				border-radius: 50rpx;
			}
		}
		&-list {
			display: flex;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;
				.icon {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 6rpx;
					image {
						max-width: 64rpx;
						max-height: 57rpx;
					}
				}
				.name {
					font-size: 22rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
}
</style>
